<template>
    <div class="mine">
        <van-row
            class="profile"
            type="flex"
            justify="space-around"
            align="center"
        >
            <img
                src="https://i.pinimg.com/originals/1f/00/27/1f0027a3a80f470bcfa5de596507f9f4.png"
            />
            <p>{{ user.nickname }}</p>
            <van-icon name="setting-o" />
        </van-row>

        <!-- 返利信息 -->
        <van-row type="flex" justify="space-between" align="center">
            <van-col>
                <p>{{ benjin_yf }}</p>
                <span>本金已返</span>
            </van-col>

            <van-col>
                <p>{{ benjin_wf }}</p>
                <span>本金未返</span>
            </van-col>

            <van-col>
                <p>{{ yongjin_yf }}</p>
                <span>佣金已返</span>
            </van-col>

            <van-col>
                <p>{{ yongjin_wf }}</p>
                <span>佣金未返</span>
            </van-col>
        </van-row>

        <van-button
            class="btn-logout"
            plain
            block
            type="primary"
            @click="onLogoutClicked"
            >退出登录</van-button
        >
    </div>
</template>

<script>
export default {
    created() {
        this.getList();
    },
    data() {
        return {
            list: [],
            user: JSON.parse(window.sessionStorage.getItem("user")) || {},
        };
    },
    methods: {
        async getList() {
            const res = await this.$http.get("/bwls");
            this.list = res.data;
        },
        onLogoutClicked() {
            window.sessionStorage.clear();
            this.$router.push("/login");
        },
    },
    computed: {
        benjin_yf() {
            return this.list
                .filter((item) => item.is_benjin_return === 1)
                .reduce((sum, value) => {
                    return sum + value.benjin;
                }, 0);
        },
        benjin_wf() {
            return this.list
                .filter((item) => item.is_benjin_return === 0)
                .reduce((sum, value) => {
                    return sum + value.benjin;
                }, 0);
        },
        yongjin_yf() {
            return this.list
                .filter((item) => item.is_yongjin_return === 1)
                .reduce((sum, value) => {
                    return sum + value.yongjin;
                }, 0);
        },
        yongjin_wf() {
            return this.list
                .filter((item) => item.is_yongjin_return === 0)
                .reduce((sum, value) => {
                    return sum + value.yongjin;
                }, 0);
        },
    },
};
</script>

<style lang="less" scoped>
.mine {
    .profile {
        background-color: orange;
        padding: 20px 0;
        color: #fff;
        font-weight: 400;

        img {
            width: 64px;
            height: 64px;
            border-radius: 50%;
        }
    }

    .btn-logout {
        margin-top: 300px;
    }
}
</style>
